<template>
	<view>
		<view class="my-search">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
							@cancel="cancel" @clear="clear">
			</uni-search-bar>			
		</view>
		<view class="all">
			<view class="side">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
							@scrolltolower="lower" @scroll="scroll">
					<view class="option" v-for="(item, index) in save" :key="index" :class="{ 'selected': selectedOption === index }" @click="selectOption(index,item)">
						{{ item.category}}
					</view>
				</scroll-view>
			</view>
			<view class="main-content">
				<scroll-view scroll-y="true" class="main-scroll">
					<!-- 主滑动区域的内容 -->
					<view v-for="(content, index) in articleNow" :key="index" class="content-item">
						<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 0" :thumbnail="avatar">
							<template v-slot:title>
								<uni-list>
									<uni-list-item :show-switch="false" :title="content.title"/>
								</uni-list>
							</template>
							<image style="width: 98%;" :src="content.coverImage" @click="articleView(index)"></image>
							<text class="uni-body uni-mt-5">
								{{content.summary}}
								</text>
							<view slot="actions" class="card-actions">
								<view class="card-actions-item" >
									<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">分享</text>
								</view>
								<view class="card-actions-item">
									<uni-icons type="heart" size="18"  @click="agree(index)"   :color="content.isLiked ? '#ff0000' : '#999'" ></uni-icons>
									<text class="card-actions-item-text">点赞</text>
								</view>
								<view class="card-actions-item" @click="showCommentPopup(content)">
									<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
									<text class="card-actions-item-text">评论</text>
								</view>
							</view>
						</uni-card>
					</view>
				</scroll-view>
			</view>
		</view>
		<uni-popup ref="commentPopup" type="bottom">
			<scroll-view scroll-y="true" class="popup-content">
				<view v-for="(comment, index) in commentNow" :key="index" class="comment-item">
					<text>{{ comment.commenter }}: {{ comment.commentText }}</text>
				</view>
				<view class="input-area">
					<input v-model="newComment" placeholder="请输入评论" />
					<button @click="addComment(newComment)">提交</button>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>




<script>
import { getAllCategorys,getConArticle,addMyComment } from '@/api/plant/article.js';
import { mapMutations } from 'vuex';
export default {
	data() {
		return {
			userName:null,
			save:[],
			articlesBycategory:[{
				category:'',
				articles:[{
					id:0,
					author:'',
					summary:'',
					content:'',
					likes:0,
					coverImage:'',
					title:'',
				}]
			}],
			articleNow:[{
				id:0,
				author:'',
				summary:'欢迎',
				content:'',
				likes:0,
				coverImage:'',
				title:'',
				isLiked:false,
			}],
			
			idNow:null,
			cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
			avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
			extraIcon: {
				color: '#4cd964',
				size: '22',
				type: 'gear-filled'
			},
			scrollTop: 0,
			old: {
				scrollTop: 0
			},
			searchValue: '',
			//options: ['全部'],
			selectedOption: null, // 用于记录当前选中的选项
			mainContent: ['1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1', '1'], // 主滑动区域的内容
			commentNow: [
				{ commenter: '用户1', commentText: '这是一条评论' },
				//{ user: '用户2', text: '这是另一条评论' }
			],
			newComment:''
		}
	},
	methods: {
		async getCon(id)
		{
			try{
				const data=await getConArticle(id);
				this.commentNow=data
			}catch(e){
				
			}
		},
		
		async addCon(text,name)
		{
			await addMyComment(text,name,this.idNow);
		},
		
		
		
		
		 ...mapMutations(['setArticle']),
		
		articleView(index){
			 this.setArticle(this.articleNow[index]);
			uni.navigateTo({
				url: '/pages/plant/article/view'
			});
		},
		async getCategorys(){
				try {
				  const data = await getAllCategorys();
				  this.articlesBycategory = data; 
				     this.save = this.articlesBycategory.map(category => ({
				            category: category.category,
				            articles: category.articles.map(article => ({
				              ...article,
				              isLiked: false
				            }))
				          }));
					
					let allCategory = {
					  category: '全部',
					  articles: []
					};
					this.save.forEach(category => {
					  allCategory.articles.push(...category.articles);
					});
					// 将新元素添加到数组末尾
					this.save.push(allCategory);
					
				  console.log(this.save)
				} catch (error) {
				  console.error('获取数据失败:', error);
				}
			},
		
		
		onClick(e) {
			console.log(e)
		},
		agree(index) {
			
			this.articleNow[index].isLiked=!this.articleNow[index].isLiked
			     
		
		},
		upper: function(e) {
			console.log(e)
		},
		lower: function(e) {
			console.log(e)
		},
		scroll: function(e) {
			console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop: function(e) {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			uni.showToast({
				icon: "none",
				title: "纵向滚动 scrollTop 值已被修改为 0"
			})
		},
		search(res) {
			uni.showToast({
				title: '搜索：' + res.value,
				icon: 'none'
			})
		},
		input(res) {
			console.log('----input:', res)
		},
		clear(res) {
			uni.showToast({
				title: 'clear事件，清除值为：' + res.value,
				icon: 'none'
			})
		},
		blur(res) {
			
			
			 if (!res.value) {
			      // 如果查询为空，显示所有文章
			      this.articleNow = this.save[this.selectedOption]?.articles || [];
			      return;
			    }
			
			
			     this.articleNow = this.save[this.selectedOption]?.articles.filter(article => {
			       const titleMatch = article.title && article.title.indexOf(res.value) !== -1;
			       const descriptionMatch = article.summary && article.summary.indexOf(res.value) !== -1;
			       return titleMatch || descriptionMatch;
			     }) || [];
			//getCon(res.value)
			
			// uni.showToast({
			// 	title: 'blur事件，输入值为：' + res.value,
			// 	icon: 'none'
			// })
		},
		focus(e) {
			
		},
		cancel(res) {
			
		},
		selectOption(option,item) {
			//console.log(item.articles)
			this.selectedOption = option; // 更新选中状态
			console.log(this.save)
			this.articleNow=this.save[option].articles
			// console.log(item.articles.length)
			// for(let i=0;i<item.articles.length;i++)
			// {
			// 	let tmp={
			// 	id:0,
			// 	author:'',
			// 	summary:'',
			// 	content:'',
			// 	likes:0,
			// 	coverImage:'',
			// 	title:'',
			// 	isLiked:false,
			// }
			// 	tmp.author=item.articles[i].author;
			// 	tmp.id=item.articles[i].id;
			// 	tmp.summary=item.articles[i].summary;
			// 	tmp.content=item.articles[i].content;
			// 	tmp.likes=item.articles[i].lkes;
			// 	tmp.coverImage=item.articles[i].coverImage;
			// 	tmp.title=item.articles[i].title;
			// 	this.articleNow.push(tmp)
			// }
			// uni.showToast({
			// 	title: '选中选项：' + option,
			// 	icon: 'none'
			// })
			
			console.log(this.articleNow)
		},
		showCommentPopup(content) {
			this.getCon(content.id)
			this.idNow=content.id
			this.$refs.commentPopup.open()
		},
		addComment() {
			// if (this.newComment.trim()) {
			// 	this.comments.push({ user: '当前用户', text: this.newComment })
			// 	this.newComment = ''
			// }
			this.addCon(this.newComment,this.userName)
			this.getCon(this.idNow)
			//this.$refs.commentPopup.close()
		}
	},
	onBackPress() {
		// #ifdef APP-PLUS
		plus.key.hideSoftKeybord();
		// #endif
	},
	mounted() {
		this.userName=this.$store.state.user.name
		this.getCategorys()
		console.log(athis.articleNow)
	}
}
</script>



<style lang="scss">
	
	
	.container {
				overflow: hidden;
			}
		
			.custom-cover {
				flex: 1;
				flex-direction: row;
				position: relative;
			}
		
			.cover-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 40px;
				background-color: rgba($color: #000000, $alpha: 0.4);
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-left: 15px;
				font-size: 14px;
				color: #fff;
			}
		
			.card-actions {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;
				height: 45px;
				border-top: 1px #eee solid;
			}
			.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.card-actions-item-text {
				font-size: 12px;
				color: #666;
				margin-left: 5px;
			}
			.cover-image {
				flex: 1;
				height: 150px;
			}
			.no-border {
				border-width: 0;
			}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
.all {
	display: flex;
	height: 100vh; // 确保整个容器占满屏幕高度
}

.side {
	width: 50px;
	background-color: #aaff00;
}

.scroll-Y {
	height: 100%; // 确保滚动区域占满侧边栏的高度
	display: flex;
	flex-direction: column; // 确保子元素垂直排列
}

.option {
	width: 100%;
	padding: 10px;
	text-align: center;
	border-bottom: 1px solid #ccc; // 分割线
	cursor: pointer;
	&:last-child {
		border-bottom: none;
	}
	&.selected { // 选中状态的样式
		background-color: #ffcc00; // 选中背景色
		color: #fff; // 选中文字颜色
		font-weight: bold; // 选中文字加粗
	}
}

.main-content {
	flex: 1;
	background-color: #f0f0f0;
	padding: 0px;
}

.main-scroll {
	height: 100%; // 确保滚动区域占满主内容区域的高度
}

.content-item {
	padding: 10px;
	border-bottom: 1px solid #ccc;
	&:last-child {
		border-bottom: none;
	}
}

.search-result {
	padding-top: 10px;
	padding-bottom: 20px;
	text-align: center;
}

.search-result-text {
	text-align: center;
	font-size: 14px;
	color: #666;
}

.example-body {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	padding: 0px;
}

.uni-mt-10 {
	margin-top: 10px;
}

.my-search {
	border: #aaff00 solid;
	background-color: red;
}

.popup-content {
	height: 500px; // 设置弹出层的高度
	padding: 20px;
	background-color: #fff;
}

.comment-item {
	padding: 10px;
	border-bottom: 1px solid #eee;
}


.input-area {
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  background-color: #f9f9f9;
	  border: 1px solid #14dd14;
	  border-radius: 5px;
	}
	
	.comment-input {
	  flex: 1;
	  padding: 15px;
	  height: 50px; /* 增加输入框高度 */
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  margin-right: 10px;
	  font-size: 16px;
	}
	
	.comment-button {
	  height: 50px; /* 使按钮高度与输入框一致 */
	  //padding: 0 20px;
	  margin-right: 500px;
	  background-color: #007bff;
	  color: white;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  font-size: 16px;
	  transition: background-color 0.3s ease;
	}
	
	.comment-button:hover {
	  background-color: #0056b3;
	}
</style>





